<!--  -->
<template>
    <div style="width: 100%;height:100%;position: relative;">
        <el-radio-group class="charttab" v-model="tabPosition" style="margin-bottom: 30px">
            <el-radio-button value="left">最近30天</el-radio-button>
    <el-radio-button value="top">最近半年</el-radio-button>
    <el-radio-button value="right">本年</el-radio-button>
  </el-radio-group>

        <div class="echarts" ref="myEcharts">
        </div>
    </div>

</template>

<script lang='ts' setup>
import * as echarts from 'echarts';
import { reactive, toRefs, ref, onMounted, toRaw, onBeforeMount, watch } from 'vue'
import { getCountsList } from '../../service/repairs/repairs'
import { RepairCountParams } from '../../service/repairs/type'
import { getQCountsList } from '../../service/questions/questions'
import type { TabsInstance } from 'element-plus'
type EChartsOption = echarts.EChartsOption;

let pepairCountParams:RepairCountParams = {
    days: 30
}
//echart图表选项
const tabPosition = ref<TabsInstance['tabPosition']>('left')
watch(tabPosition,(newValue)=>{

  switch (newValue) {
    case "left":
        pepairCountParams={days:30}
        break;
        case "top":
        pepairCountParams={months:6}
        break;
        case "right":
        pepairCountParams={years:new Date().getFullYear()}
        break;
    default:
        break;
  }
 
  getCounts();


},{})



const myEcharts = ref();
// 报修统计
const pepairCounts = ref<Array<number>>([])
const xAxis = ref<Array<string>>([])

//投诉统计
const questionsCounts = ref<Array<number>>([])

const getCounts = async () => {

    //请求报修总数
    const res: any = await getCountsList(pepairCountParams);
    if (res.errCode === 10000) {

        let series:number[]=[];
        if(tabPosition.value=="right"){
            series= res.data;
        }
        else{
            series= res.data.reverse()
        }
        pepairCounts.value = series.map((item: any) => item.counts) as Array<number>;

        xAxis.value =series.map((item: any) => item.label) as Array<string>;

    }
    //请求投诉总数
    const qres: any = await getQCountsList(pepairCountParams);
    if (qres.errCode === 10000) {

        let series:number[]=[];
        if(tabPosition.value=="right"){
            series= qres.data;
        }
        else{
            series= qres.data.reverse()
        }
        questionsCounts.value = series.map((item: any) => item.counts) as Array<number>;
    }

    initCharts();
}



// const myChart=ref();
let myChart:any =null;

const initCharts = () => {
    // var chartDom = document.getElementById('echarts')!;
     if(!myChart)  myChart = echarts.init(myEcharts.value);
    let option: EChartsOption;
    option = {
        title: {
            text: '数据展示'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['报修总数', '投诉总数']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xAxis.value
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '报修总数',
                type: 'line',
                stack: 'Total',
                data: pepairCounts.value
            },
            {
                name: '投诉总数',
                type: 'line',
                stack: 'Total',
                data: questionsCounts.value
            }

        ]
    };

    option && myChart.setOption(option);
    window.onresize= myChart.resize;
   
}

onMounted(() => {

   
    getCounts();

})
</script>
<style scoped>
.echarts {
    width: 100%;
    height: 100%;
    position: relative;
}
.charttab{
    position: absolute;
    right:40px;
    top: 0;
    z-index: 99999;
}
</style>